<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :size="size">
            <el-form-item>
              <el-select v-model="channel" clearable placeholder="渠道">
                <el-option label="BBC" value="1"></el-option>
                <el-option label="天猫" value="2"></el-option>
                <el-option label="京东" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="shopId" clearable placeholder="商户">
                <el-option label="全部商家" value="1"></el-option>
                <el-option label="新增商家" value="2"></el-option>
              </el-select>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"
                @click="findPage(null)"/>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
      </el-col>
      <el-col :span="12">
        <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
      </el-col>
  </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          :default-sort = "{prop: 'id', order: 'descending'}"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
          style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="区域" width="180"></el-table-column>
          <el-table-column prop="name" label="加盟店" style="text-align: center" sortable></el-table-column>
          <el-table-column prop="amount1" label="自营店" sortable></el-table-column>
        </el-table>
      </el-col>
  </el-row>
  </div>
</template>

<script>
  import china from '../../../../static/json/china';
  import KtButton from "@/views/Core/KtButton";
    export default {
      components: {
        KtButton
      },
      data() {
        return {
          size: "small",
          shopId: "",
          channel: "",
          hangshu: '',
          lieshu: '',
          tableData: [
            {
              id: '全国',
              name: '合计 : 0',
              amount1: '合计 : 35',
            }, {
              id: '全国',
              name: 'BBC : 0',
              amount1: 'BBC : 15',
            }, {
              id: '全国',
              name: '天猫 : 1',
              amount1: '天猫 : 10',
            }, {
              id: '全国',
              name: '京东 : 1',
              amount1: '京东 : 10',
            }
          ]
        }
      },
      mounted() {
        this.drawMap();
        this.$echarts.registerMap('china', china);
        this.drawLine();
      },
      methods: {
        // 中国地图
        drawMap() {
          // 基于准备好的dom，初始化echarts实例
          let myChartContainer = document.getElementById('myChartChina');
          let myChartChina = this.$echarts.init(myChartContainer);
          // 绘制图表
          let optionMap = {
            tooltip: {},
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            visualMap: {
              min: 0,
              max: 30,
              left: '0%',
              top: 'bottom',
              text: ['高', '低'],
              calculable: true,
              color: ['#0b50b9', '#c3e2f4']
            },
            selectedMode: 'single',
            series: [
              {
                name: '',
                type: 'map',
                mapType: 'china',
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                  },
                  emphasis: {
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                showLegendSymbol: true,
                label: {
                  normal: {
                    show: true
                  },
                  emphasis: {
                    show: false
                  }
                },
                data: [
                  {name: '上海', value: 20},
                  {name: '北京', value: 15}
                  // {name: '天津',value: 0 },
                  // {name: '重庆',value: 2 },
                  // {name: '河北',value: 2 },
                  // {name: '河南',value: 2 },
                  // {name: '云南',value: 2 },
                  // {name: '辽宁',value: 2 },
                  // {name: '黑龙江',value: 2 },
                  // {name: '湖南',value: 2 },
                  // {name: '安徽',value: 2 },
                  // {name: '山东',value: 2 },
                  // {name: '新疆',value: 2 },
                  // {name: '江苏',value: 2 },
                  // {name: '浙江',value: 2 },
                  // {name: '江西',value: 2 },
                  // {name: '湖北',value: 2 },
                  // {name: '广西',value: 2 },
                  // {name: '甘肃',value: 2 },
                  // {name: '山西',value: 2 },
                  // {name: '内蒙古',value: 2 },
                  // {name: '陕西',value: 2 },
                  // {name: '吉林',value: 2 },
                  // {name: '福建',value: 2 },
                  // {name: '贵州',value: 2 },
                  // {name: '广东',value: 2 },
                  // {name: '青海',value: 2 },
                  // {name: '西藏',value: 2 },
                  // {name: '四川',value: 2 },
                  // {name: '宁夏',value: 2 },
                  // {name: '海南',value: 2 },
                  // {name: '台湾',value: 2 },
                  // {name: '香港',value: 2 },
                  // {name: '澳门',value: 2 }
                ]
              }
            ]
          }
          let timesRun = 0;
          let interval = setInterval(function () {
            timesRun += 1;
            if (timesRun === 10) {
              clearInterval(interval);
            }
            myChartChina.setOption(optionMap);
          }, 100);
          window.onresize = function () {
            myChartChina.resize();
          }
        },
        // 柱状图
        drawLine() {
          let myChartContainer = document.getElementById('myChart');
          let myChartChina = this.$echarts.init(myChartContainer);
          let option = {
            title: {
              text: '全国店铺总数',
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              name: "单位: 个",
              type: 'category',
              data: ['北京', '上海']
            },
            series: [
              {
                name: '自营店',
                type: 'bar',
                data: [15, 20, 35]
              },
              {
                name: '加盟店',
                type: 'bar',
                data: [0, 0, 0]
              }
            ]
          };
          myChartChina.setOption(option);
        },
        //跨行跨列列表
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
          if (columnIndex === 0) { // 当前列
            if (rowIndex === 0) { // 当前行
              return {
                rowspan: 4,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
        },
      }
    }
</script>

<style>
</style>

<style scoped>
</style>
